<template>
  <div>
    <div class="part-content" v-if="list && list.length>0">
      <div  class="p1-item" v-for="(item,idx) in list" @click="goPage(idx)">
        <div class="p-l" v-if="item.name">
<!--          <img :src="getImg(idx)" class="p-icon"/>-->
          <div class="img" :class="'img'+idx"/>
        </div>
        <div class="p-r" v-if="item.name">
          <div class="p-content">
            <div class="number">{{item.number}}</div>
            <div class="des">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getHomeSummary} from "@/api/achievements";
import {clone} from "../achConfig";

export default {
  name: 'part1',
  props: ['data'],
  data () {
    return {
      list: [
        {name: "学术论文",  number: 0 },
        {name:  "学术著作", number: 0 },
        {name:  "学术专利", number: 0 },
        {name:  "鉴定成果", number: 0 },
        {name:  "获奖成果", number: 0 },
        {name:  "软件著作", number: 0 }
      ],
      imgsrc: require('../icon-top2.svg'),

      title: this.tname
    }
  },
  watch: {
    data: { //路由修改后init 页面
      handler: function() {
        this.getData()
      },
      deep: true
    }
  },
  mounted () {
    
    this.getData()
  },
  methods: {
    goPage (idx) {
      let name = 'achievements' //this.$route.name
      this.$router.push({name:name,query:{page:idx+1}})
    },
    getData () {
      let list  = clone(this.list)
      let newlist = []
      list.forEach((item,idx)=>{
        if(this.data && this.data[idx]){
          item.number = this.data[idx]
        }
        newlist.push(item)
      })
      
      this.list = newlist

      
    },
    getImg () {
      return this.imgsrc
    }
  }
}
</script>

<style  scoped>
.part-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
}
.p1-item:first-child{
  margin-left: 0px;

}
.p1-item{
  width: 16.6667%;
  height: 80px;
  flex: 1;
  display: flex;
  flex-direction: row;
  margin-left:20px;
  background-color:var(--card-body-bgcolor);
  border-radius:12px;
  padding: 4px 1vw;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.p1-item:hover{
  border-color: rgba(32, 117, 252, 0.3);
}

.p-l{
  width:40% ;
  display: flex;

}
.p-r{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.p-r.text{
  width:48px;
  height:17px;
  font-family:Source Han Sans CN;
  color:#8b949e;
  font-size:12px;
  line-height:12px;
}
.p-r.number{
  width:20px;
  height:36px;
  font-family:YouSheBiaoTiHei;
  color:#b2b9c5;
  font-size:28px;
  line-height:22px;
}

.p-icon{
  width:80px;
  height:80px;
  margin: 0 auto;
}
.p-content{
  width: calc(100% - 10px);
}
.p-content .des{
  margin-top: 2px;
  font-weight: 550;
  
}
.img{
  background: url('../iconspirites.png') no-repeat 49.95% 0.145%;
  /*1084 x 1471*/
  /*background-size: 271px 368px;*/
  width: 93px;
  height: 83px;
  transform: scale(.5);
  margin-top: -8px;
}
.img0 {
  background: url('../iconspirites.png') no-repeat 74.726% 16.691%;
}

.img1 {
  background: url('../iconspirites.png') no-repeat 49.95% 0.145%;
}

.img2{
  background: url('../iconspirites.png') no-repeat 25.025% 66.715%;

}



.img3 {
  background: url('../iconspirites.png') no-repeat 100% 16.606%;
}

.img4 {
  background: url('../iconspirites.png') no-repeat 99.899% 0.289%;

}

.img5 {

  background: url('../iconspirites.png') no-repeat 74.924% 100%;
}



</style>
